"use client";
import styles from "./index.module.scss";
import React, { useState, useEffect , useRef} from "react";
import { getLocalStorage } from '@/utils/localStorage'


interface HeaderProps {
    className?: string;
    title: string;
    onClose?: () => void;
  }
  
  const Header: React.FC<HeaderProps> = ({ className = "", title, onClose }) => {
    return (
      <div className={`${styles["header-component"]} ${className}`}>
        <div className={`${styles["header-title"]}`}>{title}</div>
        <div className={`${styles["header-close"]}`}>
            {
                onClose && <i className="fa fa-solid fa-close" onClick={() => onClose()}></i>
            }
         
        </div>
      </div>
    );
  };
  
  interface FoolterProps {
    className?: string;
    onCancel?: () => void;
    onOk: () => void;
  }
  const Foolter: React.FC<FoolterProps> = ({
    className = "",
    onCancel,
    onOk,
  }) => {
    return (
      <div className={`${styles["foolter-component"]} ${className}`}>
        <div className={`${styles["foolter-content"]}`}>
            {
                onCancel &&  <div
                className={`${styles["foolterCancel"]}`}
                onClick={() => onCancel()}
              >
                取消
              </div>
            }
         
          <div className={`${styles["foolterOK"]}`} onClick={() => onOk()}>
            关闭
          </div>
        </div>
      </div>
    );
  };


  

interface ShowNumberProps {
  className?: string;
  title?: string
  onClose: () => void
  phone?: string
  wechat?: string
}

const ShowNumber: React.FC<ShowNumberProps> = ({ className = "" ,title = "", onClose, phone, wechat}) => {
  const _USER : string | null= getLocalStorage('userInfo')
  const userDetail = _USER ? JSON.parse(_USER) : {};

  return (
    <div className={`${styles["reportComponent"]} ${className}`}>
      <div className={`${styles["header"]}`}>
        <Header title={phone ? "手机号" : "微信"} onClose={onClose} />
      </div>

      <div className={`${styles["content"]}`}>
       <div className={`${styles["phoneNumberContent"]}`}>
          <p className={`${styles['phone-nickname']}`}>{userDetail?.nickname}</p>
          <div className={`${styles['phoneNumber']}`}>
            <span className={`fa fa-solid  ${ phone ? 'fa-phone' : 'fa-brands fa-weixin'}`}></span>  <strong>{phone ? phone : wechat }</strong>
          </div>
       </div>
           
      </div>
      <div className={`${styles["foolter"]}`}>
        <Foolter onOk={() => onClose()} />
      </div>
    </div>
  );
};

export default ShowNumber;
